<template>
  <section class="w-full bg-gradient-to-b from-indigo-50/60 to-white">
    <div class="max-w-[1200px] mx-auto px-4 lg:px-8 py-14 lg:py-20 text-center">
      <h1 class="text-2xl lg:text-4xl font-semibold text-gray-900 tracking-tight">
        探索AI角色的无限可能
      </h1>
      <p class="mt-3 text-gray-500">
        与智能角色对话，开启全新的交互体验
      </p>

      <div class="mt-8 flex items-center max-w-xl mx-auto bg-white rounded-xl shadow-sm ring-1 ring-gray-200 overflow-hidden">
        <div class="pl-4 text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 103.5 3.5a7.5 7.5 0 0013.15 13.15z"/>
          </svg>
        </div>
        <input
          class="flex-1 h-14 px-3 outline-none placeholder:text-gray-400 text-gray-700 cursor-pointer"
          placeholder="搜索你感兴趣的AI角色..."
          readonly
          @click="goToExplore"
        />
        <button 
          class="h-10 mr-2 px-4 rounded-lg bg-[#635BFF] text-white text-sm hover:opacity-90 transition"
          @click="goToExplore"
        >
          搜索
        </button>
      </div>

      <div class="mt-4 flex flex-wrap gap-2 justify-center">
        <button v-for="t in tags" :key="t" class="h-8 px-3 rounded-full bg-gray-100 text-gray-600 text-sm hover:bg-gray-200">
          {{ t }}
        </button>
      </div>
    </div>
  </section>
  
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const tags = ['角色秀场','潮玩角色','百变角屋','情感陪伴']

const goToExplore = () => {
  router.push({ name: 'explore' })
}
</script>


